<template>
	<view class="my m-h100">
		<view class="flex justify-between pt-5 border-bottom pb-5 bgcolor1 px-3">
			<img class="touxiangBox"
				src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00164-1636.jpg" alt="" />
			<view class="pl-5 flex flex-1 flex-column justify-between font-weight-bold">
				<view class="flex justify-between font-34">
					<p>张三</p>
					<p>电话：19150264665</p>
				</view>
				<p>地址：xxx县xxx镇xxx村</p>
			</view>
		</view>

		<view class="flex flex-column justify-between">
			<view class="flex align-center justify-between bgcolor1 ftcolor1 py-2 px-2 border-bottom">
				<p class="flex-1 flex align-center font-32">关于</p>
				<uni-icons type="right" size="15" color="#999"></uni-icons>
			</view>
			<view class="flex align-center justify-between bgcolor1 ftcolor1 py-2 px-2 border-bottom">
				<p class="flex-1 flex align-center font-32">修改密码</p>
				<uni-icons type="right" size="15" color="#999"></uni-icons>
			</view>
			<view class="flex align-center justify-between bgcolor1 ftcolor1 py-2 px-2 border-bottom">
				<p class="flex-1 flex align-center font-32">注销账号</p>
				<uni-icons type="right" size="15" color="#999"></uni-icons>
			</view>
			<view class="flex align-center justify-between bgcolor1 ftcolor1 py-2 px-2 border-bottom">
				<p class="flex-1 flex align-center font-32">权限申请与用户说明</p>
			</view>
			<view class="flex align-center justify-between bgcolor1 ftcolor1 py-2 px-2">
				<p class="flex-1 flex align-center font-32">退出登录</p>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="w-100">
			<u-tabbar :value="tabActive" @change="changeTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="false">
				<u-tabbar-item text="首页">
					<image class="u-page__item__slot-icon tabImg" slot="active-icon" src="@/static/images/home_icon_on.png">
					</image>
					<image class="u-page__item__slot-icon tabImg" slot="inactive-icon" src="@/static/images/home_icon.png">
					</image>
				</u-tabbar-item>
				<u-tabbar-item text="订单">
					<image class="u-page__item__slot-icon tabImg" slot="active-icon" src="@/static/images/order_icon_on.png">
					</image>
					<image class="u-page__item__slot-icon tabImg" slot="inactive-icon" src="@/static/images/order_icon.png">
					</image>
				</u-tabbar-item>
				<u-tabbar-item text="积分">
					<image class="u-page__item__slot-icon tabImg" slot="active-icon" src="@/static/images/points_icon_on.png">
					</image>
					<image class="u-page__item__slot-icon tabImg" slot="inactive-icon" src="@/static/images/points_icon.png">
					</image>
				</u-tabbar-item>
				<u-tabbar-item text="我的">
					<image class="u-page__item__slot-icon tabImg" slot="active-icon" src="@/static/images/my_icon_on.png"></image>
					<image class="u-page__item__slot-icon tabImg" slot="inactive-icon" src="@/static/images/my_icon.png"></image>
				</u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabActive: 3,
			}
		},
		methods: {
			// 切换底部tab
			changeTab(e) {
				if (e == 0) {
					uni.navigateTo({
						url: '../index/index'
					})
				} else if (e == 1) {
					uni.navigateTo({
						url: '../order/order'
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: '../points/points'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.my {
		.touxiangBox {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
</style>